<template>
  <div :class="'buy bgc-fff ' + (is_iphoneX?'iphonex':'')">
    <div class="buy-about">
      <router-link :to="{ name: 'Index' }" tag="div">
        <i class="home-icon icon24"></i>
        <p>首页</p>
      </router-link>

      <div @click="show_fenxiang=true">
        <i class="share-icon icon24"></i>
        <p>分享</p>
      </div>
    </div>

    <div class="buy-buy">
      <!-- 拼团 -->
      <div v-if="is_audit==1 && is_vip==0 && is_buy==0 && is_lecturer==0 && is_group==1" class="buy-buy-group">
        <p @click="tobuy"
           v-if="is_group_status_join==false" >
          <span>¥ {{price}}</span>
          <span>原价购买</span>
        </p>
        <p @click="tobuy('group')"
           v-if="is_group_status_join==false"
           :style="is_group_status?'':'background-color: #909399;'" >
          <span>¥ {{group_price}}</span>
          <span>发起拼团</span>
        </p>
        <p v-else @click="show_fenxiang=true">邀请好友加入</p>
      </div>

      <div v-else class="buy-buy-buy">
        <p @click="tovip"
           style="background-color: #67c23a;"
           v-if="is_vip!==1 && is_vip_switch==1"
        >购买VIP</p>

        <p class="active"
           :style="liveTxt=='直播已结束'?'background-color: rgba(4, 134, 254, .5);':''"
           @click="tolive"
        >{{liveTxt}}</p>
      </div>
    </div>

    <!-- 链接分享提示弹框 -->
    <div class="fenxiang" v-show="show_fenxiang">
      <div class="fenxiang-main">
        <div class="fenxiang-main-arrow"></div>
        <div class="fenxiang-main-text">
          <p>点击右上方 「···」，</p>
          <p>选择“发送给朋友”或</p>
          <p>选择“分享到朋友圈”，</p>
          <p>呼唤你的小伙伴，一起来学习吧！</p>
        </div>
      </div>
      <div class="fenxiang-close" @click="show_fenxiang=false">我知道了</div>
    </div>
  </div>
</template>
  
<script>
import { mapState } from "vuex";
import { OrderSubmit } from "api/api"
export default {
  /**
   *
   * 5种状态：下架->vip->讲师->是否购买->拼团
   * 
   * live_state:  1未开始 2直播中 3已结束 4回放视频
   * vip_switch:  是否有vip限制
   * is_lecturer: 是否是老师，老师不存在购买限制
   * is_buy:      是否有购买
   * is_vip:      是否是vip
   * is_audit:    是否下架 0下架，下架之后只有is_buy==1的人 可以继续观看
   *
   **/

  props: {
    is_buy: {
      type: Number,
      default: null
    },
    is_vip: {
      type: Number,
      default: 0
    },
    is_vip_switch: {
      type: Number,
      default: 0
    },
    is_lecturer: {
      type: Number,
      default: 0
    },
    is_audit: {
      type: Number,
      default: null
    },
    // 直播状态
    live_state: {
      type: Number,
      default: 0
    },

    price: {
      type: String,
      default: ""
    },
    id: {
      //   type: Number, query里面是字符串 ==
      default: 0
    },

    /**
     *
     * 拼团
     *
     *  */

    // 是否参加拼团活动0:未参加1:参加
    is_group: {
      type: Number,
      default: 0
    },
    // 拼团状态0:未开始1:进行中
    is_group_status: {
      type: Number,
      default: 0
    },
    // 参团状态:false未参团true:已参团
    is_group_status_join: {
      type: Boolean,
      default: false
    },
    // 拼团价格
    group_price: {
      type: String,
      default: ""
    },
    is_qf:{
      type:Number,
        default: ""
    }
  },
  data() {
    return {
      show_fenxiang: false,
      liveTxt: ""
    };
  },
  created() {
    this.initx();
    console.log(this.is_buy)
  },
  computed: {
    ...mapState(["is_iphoneX"])
  },
  methods: {
    // 非拼团的初始化
    initx() {
      console.log(this.is_audit,this.is_buy, this.is_lecturer)
      // 注意：已购买或老师 > 已下架
      if( this.is_audit==0 && this.is_buy==0 && this.is_lecturer==0 ){
        this.liveTxt = "已下架";
      }else if ( this.is_audit==1 && (this.is_buy==1 || this.is_lecturer==1) ) {
        
        switch (this.live_state) {
           case 1:
          this.liveTxt = "进入直播";
               break
         case 2:
            this.liveTxt = "待开播";
                 break;
          case 3:
            this.liveTxt = "查看回放";
            break;
          // case 4:
          //   this.liveTxt = "查看回放";
          //   break;
        }
      } else {
        console.log(1111111)
        if (this.price == "0.00") {
          this.liveTxt = "立即报名";
        } else {
          this.liveTxt = "立即购买";
        }
      }
      // 注意：直播已结束 > VIP会员免费观看
      if (
        this.is_vip == 1 &&
        ["立即购买", "立即报名", "进入直播", "查看回放"].indexOf(
          this.liveTxt
        ) != -1
      ) {
        this.liveTxt = "VIP会员免费观看";
      }
    },
    tolive() {
      if(this.is_qf===1){
         this.$toast("服务异常,请联系客服");
         
           return
      }
        
      switch (this.liveTxt) {
        case "VIP会员免费观看":
          if (this.live_state != 3) {
            this.$router.push({ name: "LiveRoom", query: { id: this.id } });
          }
          break;
        case "直播已结束":
          break;
        case "进入直播":
        case "查看回放":
          
          this.$router.push({ name: "LiveRoom", query: { id: this.id } });
          break;
        case "立即购买":
          window.location.href =
            "/wechat/ordersubmit/orderSubmit?type=live&id=" + this.id;
          break;
        case "立即报名":
          if (this.flag_orderSubmit) return;
          OrderSubmit({
            source: "wechat", // 订单来源
            coupon_code: "", // 优惠码
            is_switch: 0, // 是否开启积分兑换
            order_type: "live", // 订单类型
            item_id: this.id // 对应的id
          }).then(res => {
            if (res.code === 1) {
              
              this.flag_orderSubmit = true;
              this.$messageBox.alert("报名成功");
              switch (this.live_state) {
                case 1:
                  this.liveTxt = "进入直播";
                  break
                case 2:
                  this.liveTxt = "待开播";
                  break;
                // case 3:
                //   this.liveTxt = "直播已结束";
                //   break;
                case 3:
                  this.liveTxt = "查看回放";
                  break;
              }
            //  if(res.data.is_qf===1){
            //   this.$messageBox.alert("服务异常,请联系客服");
            //    return
            //  }
            }
              
               else {
              if (this.flag_orderSubmit) return;
              let message = res.message || "报名失败";
              this.$messageBox.alert(message);
            }
          });
          break;
      }
    },
    tovip() {
      this.$router.push({
        name: "MemberVip"
      });
    },
    tobuy(type) {
      if (type == "group") {
        if (this.is_group_status == 1) {
          window.location.href =
            "/wechat/ordersubmit/orderSubmit?type=live&id=" +
            this.id +
            "&group=new";
        } else {
          return;
        }
      } else {
        window.location.href =
          "/wechat/ordersubmit/orderSubmit?type=live&id=" + this.id;
      }
    }
  }
};
</script>

<style scoped  lang="scss">
.buy.iphonex {
  height: 0.8rem;
  padding-bottom: 0.3rem;
}
.buy {
  height: 0.5rem;
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;

  &-about {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, 0.1);

    > div {
      width: 0.64rem;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      padding: 0.05rem 0;

      > p {
        font-size: 0.1rem;
        color: rgba(144, 147, 153, 1);
        line-height: 0.14rem;
      }

      &:first-child {
        border-right: 1px solid #f5f5f5;
      }
    }

    .home-icon {
      background: url("../../assets/images/menu-nav-home-icon.png") no-repeat
        center/contain;
    }
    .share-icon {
      background: url("../../assets/images/share-icon.png") no-repeat
        center/contain;
    }
  }

  &-buy {
    flex: auto;
    &-buy,
    &-group {
      display: flex;
      height: 100%;
    }
    &-group {
      p {
        flex-direction: column;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        &:nth-child(1) {
          background-color: #339999;
        }
        span {
          font-weight: normal;
        }
      }
    }
    p {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.14rem;
      color: rgba(255, 255, 255, 1);
      line-height: 0.2rem;
      background-color: #0486fe;
      flex: 1;
      height: .5rem;
      flex-wrap: wrap;
    }

    > p.active {
      display: flex;
    }

    .live-end {
      background-color: #cccccc;
    }
  }
}

// 分享弹框
.fenxiang {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  &-main {
    display: flex;
    flex-direction: column;
    width: 2.8rem;
    &-text p {
      color: #fff;
      font-size: 0.14rem;
      line-height: 0.3rem;
    }
    &-arrow {
      width: 1.58rem;
      height: 1.05rem;
      background: url("../../assets/images/share-tip.png") no-repeat
        center/cover;
      margin-top: 0.06rem;
      align-self: flex-end;
    }
  }
  &-close {
    width: 1.28rem;
    height: 0.36rem;
    line-height: 0.36rem;
    color: #fff;
    font-size: 14px;
    border: 1px solid #fff;
    border-radius: 4px;
    margin-top: 0.28rem;
    text-align: center;
  }
}
</style>
